<template>
  <div class="home">
    <!-- 顶部区域 -->
    <div class="header">
      <div class="item">
          <!-- 今日访问量 -->
          <div id='main' style="width: 100%; height: 120px"></div>
      </div>
      <div class="item">昨日访问量</div>
      <div class="item">本周访问量</div>
      <div class="item">本月访问量</div>
    </div>

    <!-- 访问时长 -->
    <div class="content">
      <div class="time-info">
        <div id="charts" style="width: 100%; height: 260px"></div>
      </div>
      <div class="area">地区分布</div>
    </div>

    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最新内容</span>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>新增产品</span>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("this.$echarts.init", this.$echarts);
    //折线
    this.initCharts();
    //进度
    this.progress();
  },
  methods: {
    //折线图
    initCharts() {
      let charts = this.$echarts.init(document.getElementById("charts"));
      console.log("charts", charts);
      let option = {
        title: {
          text: "逐月消费趋势", // 标题
          subtext: "柱状图", // 副标题
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
        },
        color: ["#1890ff", "#52c41a", " #faad14"], // 柱状图颜色
        dataset: {
          source: [
            // 数据源
            ["1月", 1330, 666],
            ["2月", 820, 760],
            ["3月", 1290, 1230],
            ["4月", 832, 450],
            ["5月", 901, 880],
            ["6月", 934, 600],
          ],
        },
        series: [
          // 图标列设置
          {
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            type: "line",
            name: "苹果",
            lineStyle: {
              //   color: "red",
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(224, 62, 76)",
                },
              ]),
            },
          },
          {
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            type: "line",
            name: "梨子",
            lineStyle: {
              //   color: "red",
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },
          },
        ],
        tooltip: {
          // 提示框组件
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
      };
      charts.setOption(option);
    },

    //进度
    progress() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      var option = {
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 10,
            itemStyle: {
              color: "#58D9F9",
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 10,
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "75%",
              width: 12,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 10,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 30,
              color: "#999",
              fontSize: 20,
            },
            title: {
              show: false,
            },
            detail: {
              backgroundColor: "#fff",
              borderColor: "#999",
              borderWidth: 2,
              width: "100%",
              lineHeight: 40,
              height: 40,
              borderRadius: 8,
              offsetCenter: [0, "35%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|km/h}";
              },
              rich: {
                value: {
                  fontSize: 20,
                  fontWeight: "bolder",
                  color: "#777",
                },
                unit: {
                  fontSize: 20,
                  color: "#999",
                  padding: [0, 0, -20, 10],
                },
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang='scss' scoped>
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 120px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-left: 30px;
    text-align: center;
  }
}
.content {
  margin: 20px 30px;
  display: flex;
  height: 260px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}
.home-footer {
  display: flex;
  padding-left: 30px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
}
</style>